<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站搜索结果页</title>
    <link href="css/search.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="/b-user/js/login.js"></script>
    <script src="js/common.js"></script>
    <link href="css/login.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>

</head>
<body>
<div id="app">
    <common @logined="logined"></common>

    <!-- 主体内容 -->
    <div class="main-content">
        <!-- 筛选区域 -->
        <div class="filter-group">
            <a href="" class="filter-tag active" @click.prevent="comprehensiveRank">综合排序</a>
            <a href="" class="filter-tag " @click.prevent="mostPlay">最多播放</a>
            <a href="" class="filter-tag " @click.prevent="newPublish">最新发布</a>
            <a href="" class="filter-tag " @click.prevent="mostDanmu">最多弹幕</a>
        </div>

<!--        &lt;!&ndash; 排序选项 &ndash;&gt;-->
<!--        <div class="sort-group">-->
<!--            <span><a href="#" class="sort-item">综合排序</a></span>-->
<!--            <span><a href="#" class="sort-item">最多播放</a></span>-->
<!--            <span><a href="#" class="sort-item">最新发布</a></span>-->
<!--            <span><a href="#" class="sort-item">最多弹幕</a></span>-->
<!--        </div>-->

       <div v-if="(video && video.length > 0) || (searchUInfo && searchUInfo.headimg) ">
           <!-- UP主信息 -->
           <div class="creator-card" v-if="searchUInfo.headimg">
               <img class="avatar" :src="searchUInfo.headimg" @click="location.href = '../me.html?id=' + searchUInfo.id">
               <div style="flex:1">
                   <h3>{{searchUInfo.name}}&nbsp;&nbsp;&nbsp;<span style="color:#61666D;font-size:14px">粉丝：{{searchUInfo.fens}} |  视频：{{searchUInfo.videoNum}}</span></h3>
                   <p style="color:#9499A0;font-size:13px;margin:8px 0">{{searchUInfo.title}}</p>
                   <button class="follow-btn" ref="subscribeBut" @click="subscribe" v-if="myinfo.id == searchUInfo.id ? false : true">+ 关注</button>
               </div>
           </div>

           <!-- 视频列表 -->
           <div id="up-video">
               <div class="video-item" v-for="v in newVideo">
                   <img class="video-thumb" :src="v.image">
                   <div>
                       <h4 class="video-text">{{v.vname}}</h4>
                       <p style="color:#9499A0;font-size:12px;margin:8px 0">{{formatVideoTime(v.time)}}</p>
                   </div>
               </div>

           </div>

           <div id="relative-video">
               <div class="re-video-item" v-for="v in video">
                   <img class="re-video-thumb" :src="v.image" @click="location.href = 'video.html?id=' + v.id">
                   <div>
                       <h4 class="video-text">{{v.vname}}</h4>
                       <p style="color:#9499A0;font-size:12px;margin:8px 0">{{v.name}}&nbsp;&nbsp;&nbsp;&nbsp;    {{formatVideoTime(v.time)}}</p>
                   </div>
               </div>
           </div>
       </div>

        <el-empty :image-size="200" v-else></el-empty>

        <!-- 更多视频项... -->
    </div>
</div>
</body>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            video:{},
            searchUInfo:{},
            newVideo:{},
            myinfo: {},
            isSubscribe: false, // 用户是否对当前up主进行关注
            SubscribeInfo: {}, // 关注的数据
        },
        created() {
            // 跟具搜索词查找视频
            if (location.search.includes("&")) {
                if(location.search.split("&")[1].split("=")[1] == "tag"){
                    axios.get("search/searchByTextAndType" + decodeURIComponent(location.search.split("&")[0])).then(res=>{
                        this.video = res.data.data
                    })
                }
            }else{
                axios.get("search/searchByText"+location.search).then(res=>{
                    this.video = res.data
                })
            }


        },
        methods : {
            /**
             * 格式化视频发布时间
             * @param {string} isoTime - ISO 8601 格式的时间字符串 (如: "2025-05-05T08:03:25.000+00:00")
             * @returns {string} 格式化后的时间字符串
             */
            formatVideoTime(isoTime) {
                // 1. 解析输入时间
                const pubDate = new Date(isoTime);
                const now = new Date();

                // 2. 计算时间差（毫秒）
                const diffMs = now - pubDate;
                const diffMins = Math.floor(diffMs / (1000 * 60));
                const diffHours = Math.floor(diffMs / (1000 * 60 * 60));

                // 3. 判断并返回不同格式
                if (diffMins < 60) {
                    return `${diffMins}分钟前`;
                }

                // 检查是否是今天
                const isToday = pubDate.getDate() === now.getDate() &&
                    pubDate.getMonth() === now.getMonth() &&
                    pubDate.getFullYear() === now.getFullYear();

                if (isToday && diffHours < 24) {
                    return `${diffHours}小时前`;
                }

                // 不是今天则返回具体日期
                const year = pubDate.getFullYear();
                const month = String(pubDate.getMonth() + 1).padStart(2, '0');
                const day = String(pubDate.getDate()).padStart(2, '0');

                return `${year}-${month}-${day}`;
            },

            logined(myinfo){
                this.myinfo = myinfo
                // 查看该用户是否关注up
                this.getSearchUInfo();
            },
            comprehensiveRank(){
                // 综合排序
                axios.get("search/comprehensiveRank"+location.search).then(res=>{
                    if (res.data.code == 1) {
                        this.video = res.data.data
                    }
                })
            },
            mostPlay(){
                // 最多播放
                axios.get("search/mostPlay", {
                    params:{
                        // 解码
                        searchText:decodeURIComponent(location.search.split("=")[1]),
                    }
                }).then(res=>{
                    if (res.data.code == 1) {
                        this.video = res.data.data
                    }
                })
            },
            newPublish(){
                // 最新发布
                axios.get("search/newPublish", {
                    params:{
                        searchText:decodeURIComponent(location.search.split("=")[1]),
                    }
                }).then(res=>{
                    if (res.data.code == 1) {
                        this.video = res.data.data
                    }
                })
            },
            mostDanmu(){
                // 最多弹幕
                axios.get("search/mostDanmu", {
                    params:{
                        searchText:decodeURIComponent(location.search.split("=")[1]),
                    }
                }).then(res=>{
                    if (res.data.code == 1) {
                        this.video = res.data.data
                    }
                })
            },
            getSearchUInfo(){
                // 跟具搜索词查找人
                axios.get("b-user/user/searchUInfo"+location.search).then(res=>{
                    this.searchUInfo = res.data
                    if(this.searchUInfo){
                        axios.get("b-user/user/getVideoById", {
                            params:{
                                id: this.searchUInfo.id
                            }
                        }).then(res=>{
                            this.newVideo = res.data;
                            this.getSubscribeRelation();
                        })
                    }
                })
            },
            subscribe(){
                if(this.isSubscribe){
                    // 关注
                    this.isSubscribe = false;
                    axios.get("b-user/reupfens/subscribe", {
                        params:{
                            uid: this.myinfo.id,
                            upid: this.searchUInfo.id,
                            isSubscribe: this.isSubscribe ? "true": "false"
                        }
                    }).then(res=>{
                        this.$refs.subscribeBut.style.background = "#00AEEC";
                        this.$refs.subscribeBut.textContent = "+ 关注"
                    })
                }else{
                    // 关注
                    this.isSubscribe = true;
                    axios.get("b-user/reupfens/subscribe", {
                        params:{
                            uid: this.myinfo.id,
                            upid: this.searchUInfo.id,
                            isSubscribe: this.isSubscribe ? "true": "false"
                        }
                    }).then(res=>{
                        // 界面数据渲染
                        this.$refs.subscribeBut.style.background = "gray";
                        this.$refs.subscribeBut.textContent = "已关注"
                    })

                }
            },
            getSubscribeRelation(){
                axios.get("b-user/reupfens/getSubscribeRelation", {
                    params:{
                        uid: this.myinfo.id,
                        upid: this.searchUInfo.id,
                    }
                }).then(res=>{
                    if(res.data){
                        console.log("已关注")
                        // 界面数据渲染
                        this.SubscribeInfo = res.data
                        this.isSubscribe = true;
                        this.$refs.subscribeBut.style.background = "gray";
                        this.$refs.subscribeBut.textContent = "已关注"
                    }else{
                        this.isSubscribe = false;
                        this.$refs.subscribeBut.style.background = "#00AEEC";
                        this.$refs.subscribeBut.textContent = "+ 关注"
                    }
                })
            },
        }
    })
</script>

</html>